<template>
  <p>{{ originData.count }} ---{{ originData.user.name }}</p>
  <p v-for="(item, index) in originData.arr" :key="index">{{ item }}</p>
  <button @click="incriment">点击我count增加</button>

</template>
<script setup lang="ts">
import { defineComponent, reactive, ref, watchEffect, watch } from 'vue';
let count = ref(0)
let user = reactive({
  name: '张三'
})
const arr = reactive([1, 2, 3, 4]);
let originData = reactive({
  count: 0,
  user: {
    name: '李四'
  },
  arr: [1, 23, 4, 5]
})
let incriment = () => {
  originData.count++
  count.value++
  originData.user.name = "王"
}
console.log("setup1");
//默认页面刷新之前立即执行监听，懒执行开始
watchEffect(() => {
  console.log("watchEffect1："+count.value);
});
console.log("setup2");
//默认监听数据变换后的值，页面更新后不会立即执行
watch(count, (n, o) => {
  console.log("watch1")
  console.log('watch', n, o);
});
console.log("setup3");
//监听多个值
watch([count, originData.user], (newValues, preValues) => {
    console.log("watch2")
  console.log(newValues[0], newValues[1], preValues[0]);
})
console.log("setup4");
//立即监听
watch([count, originData.user], (newValues, preValues) => {
    console.log("watch3")
  console.log(newValues[0], newValues[1], preValues[0]);
}, { deep: true, immediate: true })
console.log("setup5");
</script>